Authentication Flow ম্যানেজমেন্ট (Private Routes)

React Native অ্যাপ্লিকেশনে Authentication Flow এবং Private Routes তৈরি করা একটি গুরুত্বপূর্ণ প্রক্রিয়া, যা অ্যাপের সিকিউরিটি নিশ্চিত করে এবং শুধুমাত্র অথেনটিকেটেড ব্যবহারকারীদের নির্দিষ্ট রুটে অ্যাক্সেস প্রদান করে।

এই গাইডে আমরা দেখব কীভাবে একটি Authentication Flow তৈরি করতে হয় এবং Private Routes সেট আপ করা যায়, যাতে শুধুমাত্র অথেনটিকেটেড ব্যবহারকারীরা নির্দিষ্ট স্ক্রীন বা রুট অ্যাক্সেস করতে পারে।

Authentication Flow কী?

Authentication Flow হল একটি সিস্টেম যেখানে ব্যবহারকারীরা অ্যাপ্লিকেশন ব্যবহারের আগে তাদের পরিচয় যাচাই করে। এই যাচাইকরণ প্রক্রিয়া সফল হলে তারা অ্যাপের নির্দিষ্ট অংশে প্রবেশ করতে সক্ষম হয় (যেমন, ড্যাশবোর্ড বা প্রাইভেট স্ক্রীন)। অন্যথায়, তারা লগইন স্ক্রীনে ফিরে যেতে বাধ্য হয়।

React Navigation Setup

React Native-এ রাউটিং এবং নেভিগেশন ব্যবস্থাপনার জন্য সাধারণত React Navigation লাইব্রেরি ব্যবহৃত হয়। আমরা এখানে React Navigation ব্যবহার করব।

React Navigation Setup:

1. প্রথমে react-navigation এবং অন্যান্য প্রয়োজনীয় প্যাকেজগুলি ইনস্টল করুন:

npm install @react-navigation/native
npm install @react-navigation/stack
npm install react-native-gesture-handler react-native-reanimated
npm install react-native-screens react-native-safe-area-context

2. এরপর, আপনার অ্যাপ্লিকেশনের জন্য NavigationContainer এবং Stack Navigator কনফিগার করুন।

Authentication Flow এবং Private Routes

Step 1: Create Basic Navigation Structure

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import LoginScreen from './screens/LoginScreen';
import DashboardScreen from './screens/DashboardScreen';
import { AuthContext } from './context/AuthContext';

const Stack = createStackNavigator();

const App = () => {
  const { userToken, login, logout } = React.useContext(AuthContext);

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {userToken == null ? (
          // If no user is authenticated, show Login Screen
          <Stack.Screen name="Login" component={LoginScreen} />
        ) : (
          // If authenticated, show Dashboard (Private Route)
          <Stack.Screen name="Dashboard" component={DashboardScreen} />
        )}
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Explanation:

• প্রথমে userToken চেক করা হয়। যদি userToken না থাকে (অথবা ইউজার অথেনটিকেটেড না থাকে), তবে Login Screen দেখানো হবে।
• যদি userToken থাকে (অথবা ইউজার অথেনটিকেটেড থাকে), তবে Dashboard স্ক্রীন দেখানো হবে, যা একটি Private Route।

Step 2: Authentication Context Setup

আমরা Context API ব্যবহার করে ইউজার অথেনটিকেশন ম্যানেজমেন্ট করব। এই কন্টেক্সটটি আমরা যেকোনো স্ক্রীনে ইউজার অথেনটিকেশন স্টেট অ্যাক্সেস করার জন্য ব্যবহার করতে পারব।

1. AuthContext.js:

import React, { createContext, useState } from 'react';

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [userToken, setUserToken] = useState(null);

  const login = (token) => {
    setUserToken(token);
  };

  const logout = () => {
    setUserToken(null);
  };

  return (
    <AuthContext.Provider value={{ userToken, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

Explanation:

• AuthContext তৈরির মাধ্যমে আমরা login এবং logout ফাংশন এবং userToken স্টেট ব্যবহারকারীর লগইন স্টেট সেভ করব।
• login ফাংশন দিয়ে ব্যবহারকারী যখন লগইন করবে, তখন তাদের টোকেন সেভ হবে।
• logout ফাংশন দিয়ে ব্যবহারকারী লগ আউট করলে টোকেন সরিয়ে ফেলা হবে।

Step 3: Wrap the App with AuthProvider

AuthProvider কন্টেক্সট প্রোভাইডারকে অ্যাপের রুটের চারপাশে ব্যবহার করে, যাতে সারা অ্যাপ্লিকেশন জুড়ে কন্টেক্সট অ্যাক্সেস করা যায়।

import React from 'react';
import { AuthProvider } from './context/AuthContext';
import App from './App';

const Main = () => {
  return (
    <AuthProvider>
      <App />
    </AuthProvider>
  );
};

export default Main;

Step 4: Login Screen and Private Route Navigation

এখন আমরা Login Screen তৈরি করব, যেখানে ব্যবহারকারী লগইন করলে, তাদের userToken কন্টেক্সটে সেট হবে এবং তারা প্রাইভেট রাউটের (যেমন, ড্যাশবোর্ড) অ্যাক্সেস পাবে।

1. LoginScreen.js:

import React, { useState, useContext } from 'react';
import { View, TextInput, Button, Text } from 'react-native';
import { AuthContext } from '../context/AuthContext';

const LoginScreen = ({ navigation }) => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const { login } = useContext(AuthContext);

  const handleLogin = () => {
    // Here you would typically check the credentials from a backend
    if (username === 'user' && password === 'password') {
      const token = 'fakeToken123';  // In real apps, you'll get this from backend
      login(token);
      navigation.navigate('Dashboard');
    } else {
      alert('Invalid credentials');
    }
  };

  return (
    <View>
      <TextInput
        placeholder="Username"
        value={username}
        onChangeText={setUsername}
      />
      <TextInput
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      <Button title="Login" onPress={handleLogin} />
    </View>
  );
};

export default LoginScreen;

Explanation:

• এখানে ব্যবহারকারী যখন লগইন ফর্ম পূর্ণ করে, তাদের ইউজারনেম এবং পাসওয়ার্ড যাচাই করা হচ্ছে।
• সফল লগইনের পরে, login ফাংশন ব্যবহার করে userToken কন্টেক্সটে সেট করা হচ্ছে এবং Dashboard স্ক্রীনে নেভিগেট করা হচ্ছে।

Step 5: Private Route (Dashboard)

Dashboard স্ক্রীনে কেবল তখনই প্রবেশ করা যাবে যখন ইউজার অথেনটিকেটেড থাকবে।

1. DashboardScreen.js:

import React, { useContext } from 'react';
import { View, Text, Button } from 'react-native';
import { AuthContext } from '../context/AuthContext';

const DashboardScreen = () => {
  const { logout } = useContext(AuthContext);

  return (
    <View>
      <Text>Welcome to the Dashboard</Text>
      <Button title="Logout" onPress={() => logout()} />
    </View>
  );
};

export default DashboardScreen;

Explanation:

• Dashboard Screen কেবল তখনই অ্যাক্সেসযোগ্য হবে যখন ব্যবহারকারী লগইন থাকবে।
• এখানে Logout বাটন যুক্ত করা হয়েছে, যা ব্যবহারকারীকে লগ আউট করতে সাহায্য করবে এবং অ্যাপ আবার Login Screen এ ফিরিয়ে নিয়ে যাবে।

Final Structure:

• AuthContext.js: ইউজার অথেনটিকেশন স্টেট এবং ফাংশন।
• App.js: রাউটিং এবং নেভিগেশন, প্রাইভেট রাউট সিকিউরিটি।
• LoginScreen.js: ইউজার লগইন স্ক্রীন।
• DashboardScreen.js: প্রাইভেট রাউট, যেখানে শুধুমাত্র অথেনটিকেটেড ইউজাররা প্রবেশ করতে পারবে।

Conclusion

• React Native অ্যাপ্লিকেশনে Authentication Flow এবং Private Routes সেটআপ করার জন্য আমরা Context API ব্যবহার করেছি।
• Private Routes নিশ্চিত করতে React Navigation এর মাধ্যমে আমরা userToken চেক করেছি, এবং সঠিকভাবে Login Screen বা Dashboard স্ক্রীন দেখানো হয়েছে।
• এই অ্যাপ্লিকেশনটি ব্যবহারে আপনার প্রাইভেট রাউটস এবং অথেনটিকেশন ফ্লো সুন্দরভাবে পরিচালিত হবে।